<template>
    <div>
        <ul v-if="displayedSongs.length > 0">
            <h4>（点击歌单即可查看歌单详情）</h4>
            <li v-for="(song, index) in displayedSongs" :key="song.id" @click="goToSongDetail(song.id)">
                {{ index + 1 }}. {{ song.title }} ———— 热度：{{ song.popularity }}
            </li>
        </ul>
        <div v-else>
            <h3 class="warn">“您没有创建歌单，已为您推荐网站热门歌单”</h3>
            <h4>（点击歌单即可查看歌单详情）</h4>
            <div>
                <RandomSongList />
            </div>
        </div>
    </div>
</template>

<script>
import useUserStore from '@/store/modules/user';
import { getTopPlaylistByUserID } from "@/api/playlist/playlist.js";
import RandomSongList from "@/components/personal_charts/RandomSongList.vue";

const userStore = useUserStore();
const currentUserId = computed(() => userStore.id);

export default {
    name: 'ShowPlaylist',
    components: {RandomSongList},
    data() {
        return {
            displayedSongs: []
        };
    },
    methods: {
        async fetchSongs() {
            try {
                const response = await getTopPlaylistByUserID(currentUserId.value);
                this.displayedSongs = response.rows.map(item => ({
                    title: decodeURIComponent(item.title.replace(/\+/g, ' ').replace("_", "——")),
                    id: item.id,
                    popularity: item.popularity
                }));
                console.info(this.displayedSongs)
            } catch (error) {
                console.error('Error fetching songs:', error);
            }
        },
        goToSongDetail(playlistId) {
            this.$router.push({ path: `/playlist-detail/${playlistId}` });
        }
    },
    mounted() {
        this.fetchSongs();
    }
};
</script>

<style scoped>
ul {
    list-style-type: none;
    padding: 0;
}

li {
    font-size: x-large;
    margin: 10px 0;
    cursor: pointer;
}
li:hover {
    text-decoration: underline;
}
.warn{
    color: red;
}
</style>